<template>
  <div class="page">
    <c-title :hide="false" text="健康讲座"></c-title>
    <div class="top">
       <van-swipe class="my-swipe" :autoplay="3000"   >
        <van-swipe-item v-for="(item,index) in pricList" :key="index "><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="bottom">
      <h3>精选视频</h3>
      <div class="video" v-for="(item, index) in list" :key="index">
        <video webkit-playsinline="true" playsinline="true" x5-playsinline="true" x-webkit-airplay="true" x5-video-ignore-metadata="true" controls="controls" :src="item.vidurl"></video>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fieldValue: null,
      showArea: false,
      result: 0,
      address: null,
      arrArea: [],
      dtList: [
        { wenben: "1", data: "几天前" },
        { wenben: "1", data: "几天前" },
        { wenben: "1", data: "几天前" }
      ],
      pricList:[],
      list: [{ vidurl: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }, { vidurl: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }]
    };
  },
  setup() {
    return { areaList };
  },
   activated(){
    this.getLsit();
  },
  methods: {
    getLsit(){
       $http
    .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
     category_id: 5,
      store_id:27,
    })
    .then(response => {
  this.pricList=response.json
    console.log(response.json)
    });
    },
    getaddress() {},
    getList() {},
    onAreaConfirm(val) {
      this.arrArea = val[0].name + "-" + val[1].name + "-" + val[2].name;
      this.showArea = false;
    },
    bindCancel() {
      this.showArea = false;
    }
  }
};
</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
  img {
    height: 10rem;
    width: 100%;
  }
}
.bottom {
  h3 {
    margin: 1rem 18rem 0.5rem 0rem;
    font-size: 1rem;
  }
  img {
    padding: 0.1rem;
    border-radius: 2rem;
  }
  video {
    width: 100%;
    margin-bottom: 1rem;
  }
}
</style>